<template>
    <div>
         <el-col :span="12">
        <el-card style="width:400px;height:500px;margin: auto;">
            <h4>消息</h4><h5>你正在和 {{username}} 聊天</h5>
            <!-- <span  v-for="xiaoxi in xiaoxis" :key="xiaoxi.y" style="float:right">{{xiaoxi.y}}</span> -->
            <span  v-for="xiaoxi in xiaoxis" :key="xiaoxi.value" >
                <span v-if="xiaoxi.m == 'apl'" style="float:right">
                        {{username}}:{{xiaoxi.y}}
                </span>
                <span v-if="xiaoxi.y == 'apl'" style="float:left">
                        MY:{{xiaoxi.m}}
                </span>
                <br/>
            </span>
        </el-card>
        <el-card style="width:400px;margin: auto;">
            <el-input v-model="params" placeholder="请输入内容" style="width: 300px"></el-input>
            <el-button type="primary" @click="send">发送</el-button>
        </el-card>
         </el-col>
         <el-col :span="12">
        <el-card style="width:400px;height:500px;margin: auto;">
            <h4>用户</h4>
            <el-button type="success"  v-for="user in users" :key="user"   @click="go(user)">{{user}}</el-button>
        </el-card>
        </el-col>
         
    </div>
</template>

<script>
import axios from 'axios'
export default {
    data () {
        return {
            path:"ws://192.168.6.189:8080/websocket/",
            socket:"",
            xiaoxis:[],
            params:'',
            users:[],
            username:'',
        }
    },
    mounted () {
        // 初始化
      
         axios.get("http://192.168.6.189:8080/hpl-admin/getadminName").then((r) => {
                if(r.data.code == 200){
                    this.path = this.path + r.data.data;
                    this.init()
                }
            })
    },
    methods: {
        init: function () {
            if(typeof(WebSocket) === "undefined"){
                alert("您的浏览器不支持socket")
            }else{
                // 实例化socket
                this.socket = new WebSocket(this.path)
                // 监听socket连接
                this.socket.onopen = this.open
                // 监听socket错误信息
                this.socket.onerror = this.error
                // 监听socket消息
                this.socket.onmessage = this.getMessage
            }
        },
        open: function () {
            console.log("socket连接成功")
        },
        error: function () {
            console.log("连接错误")
        },
        //得到服务器发回的消息
        getMessage: function (msg) {
          let m = JSON.parse(msg.data);
          //有用户发送消息
          if(m.messageType == 4){
            this.xiaoxis.push({y:m.textMessage,m:"apl"});
          }
          //有新用户登录
          if(m.messageType == 5){
            this.users.push(m.username)
          }
          //链接成功，接受服务器发回的消息
          if(m.messageType == 3){
            this.users = m.onlineUsers;
          }
          //有用户退出
          if(m.messageType == 2)
            for (let i = 0; i < this.users.length; i++) {
              if(this.users[i] == m.username){
                  this.users.splice(i,1);
                  break;
              }  
            }
          console.log(msg.data)
        },
        send: function () {
          console.log(this.username);
         let m =  {message:this.params,username:"admin",to:this.username}
         m = JSON.stringify(m);
         this.xiaoxis.push({y:"apl",m:this.params});
         console.log(m);
            this.socket.send(m)
        },
        close: function () {
            console.log("socket已经关闭")
        },
        go(e){
          this.username = e;
          this.xiaoxis = [];
        }
    },
    destroyed () {
        // 销毁监听
        this.socket.onclose = this.close
    }
}
</script>

<style>

</style>